<template>
  <div>
    <!-- <div id="example-2">
      <button @click="show = !show">Toggle show</button>
      <transition name="bounce">
        <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
      </transition>
    </div> -->
    <!-- <div id="example-3">
      <button @click="show = !show">
        Toggle render
      </button>
      <transition name="custom-classes-transition" enter-active-class="animated rotateOut" leave-active-class="animated bounceOutRight">
        <p v-if="show">hello</p>
      </transition>
    </div> -->
    <!-- <div id="example-4">
      <button @click="show = !show">
        Toggle
      </button>
      <transition appear v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false">
        <p v-if="show">
          Demo
        </p>
      </transition>
    </div> -->
    <transition>
  <button v-bind:key="docState">
    {{ buttonMessage }}
  </button>
</transition>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      show: false
    };
  },
  methods:{
      beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  },
  computed: {
  buttonMessage: function () {
    switch (this.docState) {
      case 'saved': return 'Edit'
      case 'edited': return 'Save'
      case 'editing': return 'Cancel'
    }
  }
}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
#example-3 {
  background: red;
  width: 100px;
  height: 100px;
  margin: 100px auto;
} */
</style>
